<template>
  <a-modal
    :title="title"
    style="top: 100px;"
    :width="1500"
    :visible="gradeVisible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <!-- 考评依据 -->
    <a-divider orientation="left">
      考评依据
    </a-divider>
    <a-card :bordered="false">
      <a-row>
        <a-col :span="14">
          <a-divider orientation="left">
            考评标准
          </a-divider>
          <a-row>

          </a-row>
          <a-row>
            <a-list item-layout="horizontal" :data-source="kpyjData">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a :value="item" @click="addData(item)">
                  {{ item }}
                </a>
              </a-list-item>
            </a-list>
          </a-row>
        </a-col>
        <a-col :span="10">
          <!-- <a-divider orientation="left" v-show="!showFlag">
            考评点
          </a-divider>
          <a-list item-layout="horizontal" :data-source="kpdData" v-show="!showFlag">
            <a-list-item slot="renderItem" slot-scope="item, index">
              {{ item }}
            </a-list-item>
          </a-list> -->
        </a-col>
      </a-row>
    </a-card>
    <a-divider orientation="left">
      评分区域
    </a-divider>
    <!-- 评分区域 -->
    <a-card :bordered="false">
      <a-list item-layout="horizontal" :data-source="pfData">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-row style="width:100%">
            <a-col :span="1">
              <a-icon type="delete" style="color:red" @click="deleteItem(item)"/>
            </a-col>
            <a-col :span="18">
              <span style="margin-left:-30px">
                {{ item.kpd }}
              </span>
            </a-col>
            <a-col :span="5">
              <a-input-number
                style="width:80%"
                :min="0"
                :max="999999"
                :precision="0"
                :id="item.key+''"
                :defaultValue="item.pf"
                v-if="item.kpd.indexOf('加') >= 0"
              />
              <a-input-number
                style="width:80%"
                :max="0"
                :precision="0"
                :id="item.key+''"
                :defaultValue="item.pf"
                v-else
              />
              <span style="float:right;margin-right:60px;font-size:12px;height: 20px;color: red;" v-if="item.kpd.indexOf('加') >= 0">注：只允许输入正数或0</span>
              <span style="float:right;margin-right:60px;font-size:12px;height: 20px;color: red;" v-else>注：只允许输入负数或0</span>
            </a-col>
          </a-row>
        </a-list-item>
      </a-list>
    </a-card>
  </a-modal>
</template>

<script>
import { query } from '@/api/admin'
import { addScore, getScore } from '@/api/parBasicData'
export default {
  name: 'PersonScoreManageGrade',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      gradeVisible: false,
      confirmLoading: false,
      title: '',
      showFlag: false,
      kpyjData: [],
      kpdData: [],
      indeterminate: true,
      pfData: [],
      orderNum: 0,
      kpxmbid: ''
    }
  },
  created () {

  },
  watch: {
    form (ndata, odata) {
    }
  },
  methods: {
    /**
     * 记成效记差错
     */
    deduction (record) {
      if (record.kpbz === undefined || record.kpbz === '') {
        this.$message.error('无考评标准，无法评分')
      } else {
        this.kpxmbid = record.id
        this.showFlag = false
        this.title = '评分'
        this.kpyjData = record.kpbz.split(/\n/g)
        this.kpdData = record.kpd === undefined ? [] : record.kpd.split(/\n/g)
        this.getScore(this.kpxmbid)
        this.gradeVisible = true
      }
    },
    close () {
      this.pfData = []
      this.kpyjData = []
      this.kpdData = []
      this.$emit('close')
      this.gradeVisible = false
    },
    handleOk () {
      let addFlag = true
      this.pfData.forEach((item, index) => {
        if (document.getElementById(item.key).value === '') {
          this.$message.error('第' + (index + 1) + '条评分不能为空')
          addFlag = false
          return
        }
        item.pf = Number(document.getElementById(item.key).value)
      })
      if (addFlag) {
        let param = []
        if (this.pfData.length === 0) {
          param.push({ kpxmbid: this.kpxmbid })
        } else {
          param = this.pfData
        }
        addScore(param).then(res => {
          if (res.status === 200) {
            this.$notification['success']({
              message: '保存成功',
              duration: 2
            })
            if (!this.showFlag) {
              if (this.pfData.length > 0) {
                this.$emit('updateDqdf', this.pfData, this.kpxmbid)
              }
            }
          } else {
            this.$notification['error']({
              message: res.message,
              duration: 4
            })
          }
        }
        ).catch(() =>
          this.$notification['error']({
            message: '出现异常，请联系系统管理员',
            duration: 4
          })
        ).finally(() => {
          this.confirmLoading = false
          this.close()
        })
      }
    },
    handleCancel () {
      this.close()
    },
    addData (val) {
      const data = {}
      const orderNum = this.orderNum
      this.$set(data, 'key', orderNum)
      this.$set(data, 'kpd', val)
      this.$set(data, 'kpxmbid', this.kpxmbid)
      this.pfData.push(data)
      // this.form = this.$form.createForm(this)
      this.orderNum++
    },
    deleteItem (val) {
      this.pfData = this.pfData.filter(item => item !== val)
    },
    getScore (val) {
      const param = {}
      param.kpxmbid = val
      getScore(param).then(res => {
        this.pfData = res
      })
    }
  }
}
</script>
